<template>
    <div class="yard">
        <div class="top-back"><div class="go_back" @click="back"> </div></div>
        <div class="store-type3 store-type3_">
            <div
              @click="toCanalGoods(-1)"
              :class="{ item: true, item_: status == -1 }"
            >
              全部
            </div>
            <div class="line"></div>
           
            <div
              @click="toCanalGoods(1)"
              :class="{ item: true, item_: status == 1 }"
            >
              待发货
            </div>
            <div class="line"></div>
            <div
              @click="toCanalGoods(2)"
              :class="{ item: true, item_: status == 2 }"
            >
              待收货
            </div>
            <div class="line"></div>
            <div
              @click="toCanalGoods(3)"
              :class="{ item: true, item_: status == 3 }"
            >
              已签收
            </div>
            <div class="line"></div>
            <div
              @click="toCanalGoods(4)"
              :class="{ item: true, item_: status == 4}"
            >
              已完成
            </div>
            <div class="line"></div>
            <div
              @click="toCanalGoods(8)"
              :class="{ item: true, item_: status == 8}"
            >
                退款
            </div>
          </div>
        <div class="four-content same content4-margin">
            <div class="item" :key="index" v-for="(item, index) in goodsList">
              <div class="top-data">
                <div class="top-left">订单 {{item.sub_order_no}}</div>
                <div class="top-right">{{item.status_txt}}</div>
              </div>
              <div class="main">
                  <div class="left">
                    <img :src="item.images[0]" />
                  </div>
                  <div class="right">
                
                    <div style="width:75%">
                      <div class="div2 overflow_4">{{ item.goods_name }}</div>
                      <div class="div2 news overflow_4">{{ item.goods_attr }}</div>
                    </div>
                    <div class="div3" >
                      <div>¥{{ item.goods_price }}</div>
                       <div>x{{ item.total_number }}</div>
                    </div>
              </div>
           
              </div>
              <div class="bot-flex"> 
                  <div >收件人: {{ item.consignee }}</div>
                  <div >手机号: {{ item.consignee_mobile }}</div>
               </div>
               <div class="bot-order">下单时间: {{item.created_at}}</div>
              <!-- <div class="div1" v-if="index<10 && goodsType != 1">top-{{index+1}}</div>
              <div class="div2 overflow_">{{item.goods_name}}</div>
              <div class="div3">
                <span>销量:{{item.month_sales}}</span>
                <span>销量金额:¥{{item.sale_price}}</span>
              </div> -->
            </div>
            <div
              class="statis_no statis_no_list"
              v-if="goodsList.length == 0 && showDom"
            >
              <img src="/static/picture/detail_null.png" class="no_pic" />
              <div class="no_title">暂无数据</div>
            </div>
          </div>
    </div>        
</template>
<script>
import Clipboard from 'clipboard';  
import $ from "jquery";
    export default {
        name: 'Yard',
        data () {
             return {
                infor:"",
                headPic:"",
                goodsList: [],
                showDom: false,
                status: 1,
                page: 1,
                limit: 15,
                isSending: false, // 是否正在加载
                isGetMore: true, // 是否还有更多
             }
        },
        created(){
            document.title="订单列表";
            this.getGoodsList()
        },
        mounted() {
            var that = this;
            window.onscroll = function () {
            //scrollTop就是触发滚轮事件时滚轮的高度
             var scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;
            // console.log("滚动距离" + scrollTop);
            //变量windowHeight是可视区的高度
            
             var windowHeight =
                document.documentElement.clientHeight || document.body.clientHeight;
            // console.log("可视高度" + windowHeight);
            //变量scrollHeight是滚动条的总高度
            
                var scrollHeight =
                document.documentElement.scrollHeight || document.body.scrollHeight;
            //判断滚动条是否到底部
                if ((scrollTop + windowHeight) >= (scrollHeight-1)) {
                //加载数据
                
                that.getGoodsList();
      
                }
            };
        },
        methods:{
            back(){
               this.$router.go(-1);  
            },
                        //商品排行榜时间筛选
            toCanalGoods(index){


                if (this.status == index) {
                    this.status = index;
                    return;
                }
                this.initialize();
                this.goodsList = [];
                this.status = index;
                this.getGoodsList();

            },
             //初始化
            initialize() {
            $("html,body").animate({ scrollTop: 0 }, 0);
            this.showDom = false;
            this.page = 1;
            this.limit = 15;
            // this.monChange = 1;
            this.isSending = false;
            this.isGetMore = true;

            this.goodsList = [];
           
            },
                //商品排行榜
                getGoodsList() {
                var that = this;
                if (this.isSending || !this.isGetMore) {
                    return;
                }
                this.isSending = true;
                Indicator.open();
                var params = new URLSearchParams();
                    params.append('page',this.page);       //你要传给后台的参数值 key/value
                    params.append('limit',this.limit);
                    params.append('status',this.status);
                this.$axios({
                    url: "mall/v1/order/allList",
                    method: "post",
                    data:params,
                    headers: {
                    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                    Authorization: "bearer " + localStorage.getItem("token"),
                    }
                }).then(res => {
            
                    if (res.data.code == 200) {
                        this.showDom = true;
                        Indicator.close();
                        that.page++;
                        that.goodsList = that.goodsList.concat(res.data.data);
                        if (res.data.data.length < this.limit) {
                        this.isGetMore = false;
                        }
                        this.isSending = false;
                    } else {
                        Toast(res.data.msg);
                    }
                    });
                },
        },
    }
</script>
<style scoped lang="less">
.yard{height:100%;position: absolute;background:#F8F8F8;max-width: 1120px;
  width: 100%;
  margin: 0 auto;}
.go_back{width:48px;height:48px;background:url("/static/images/team_go_back.png") no-repeat center center;background-size:100% 100%;margin-top:20px;margin-left:12px;
   
   
}
.top-back{
    width:100%;height:88px;
    position: fixed;
      left: 0;
      top: 0;
      background-color: #F8F8F8;
      z-index: 99;
}
.code{width:698px;background:#FFF;margin:0 auto;border-radius:40px;padding-top:20px;margin-top:56px;}
.head_pic{width:104px;height:104px;margin:0 auto;}
.head_pic img{width:100%;height:100%;border-radius:50%;}
.name{font-size:28px;color: #333334;font-weight:bold;text-align: center;margin-top:22px;}

.invite{text-align:center;font-size:24px;color:#333334;margin-top:22px;}
.invite span.copys{color:#4A4A4A;border:2px solid #4A4A4A;padding:0 12px;border-radius:8px;margin-left:20px;}
.code_img{width:420px;height:420px;margin:0 auto;margin-top:12px;}
.code_img img{width:100%;}
.code_exp{font-size:28px;color:#9B9B9B;text-align:center;padding-bottom:60px;line-height:44px;}
.four-content {
      width: 100%;
      //   padding-bottom: 50px;
      //   box-sizing: border-box;
      .item {
        width: 100%;
        // height: 260px;
        padding: 44px 26px;
        box-sizing: border-box;
        border-bottom: solid 2px #f2f2f2;
       // display: flex;
       // justify-content: space-between;
        .top-data{
          display: flex;
        justify-content: space-between;
        font-size:26px;
        }
        .main{
           width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top:16px;
        }
          .bot-flex{
            display: flex;
             justify-content: flex-start;
             margin-top:12px;
             > div {
              &:nth-child(2) {
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 52, 1);
                line-height: 40px;
                text-align:right;
              }
              &:nth-child(1) {
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(221, 8, 66, 1);
                line-height: 40px;
                 text-align:right;
                 margin-right: 20px;
              }
             } 
          }
          .bot-order{
              font-size:24px;
            color:#9B9B9B;
            margin-top:20px;
          }
        .left {
          width: 30%;
          //max-width:200px;
          > img {
            width: 100%;
            // height: 24.6%;
            border-radius: 16px;
          }
        }
        .right {
          width: 68%;
          display: flex;
          justify-content: space-between;
          .div1 {
            // width: 122px;
            // height: 52px;
            // background: rgba(252, 234, 234, 1);
            // border-radius: 26px;
            // text-align: center;
            // line-height: 52px;
            font-size: 26px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: rgba(51, 51, 52, 1);
          }
          .div2 {
            font-size: 28px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: rgba(51, 51, 52, 1);
            line-height: 40px;
            margin-top: 6px;
            width: 100%;
          }
          .news{
            font-size:24px;
            color:#9B9B9B;
            margin-top:20px;
          }
          .div3 {
            margin-top:3px;
        
            > div {
              &:nth-child(2) {
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 52, 1);
                line-height: 40px;
                text-align:right;
              }
              &:nth-child(1) {
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(221, 8, 66, 1);
                line-height: 40px;
                 text-align:right;
              }
            }
          }
       
        }
      }
    }
    .same {
      position: absolute;
      z-index: 9;
    }
    .content4-margin {
      top: 180px !important;
    }
    .store-type3_ {
      .item {
        width: 100px !important;
      }
    }
    .store-type3 {
      position: fixed;
      left: 0;
      top: 80px;
      width: 100%;
      height: 100px;
      background: rgba(255, 255, 255, 1);
      padding: 0 26px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 2px #f2f2f2;
      z-index: 10;
      .item {
        width: 136px;
        height: 46px;
        background: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 46px;
        font-size: 28px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: rgba(155, 155, 155, 1);
      }
      .item_ {
        background: rgba(252, 234, 234, 1) !important;
        color: #dd0842;
      }
      .line {
        width: 2px;
        height: 28px;
        background: #f2f2f2;
      }
    }
    .overflow_ {
    text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
    white-space: nowrap; /*让文字不换行*/
    overflow: hidden; /*超出要隐藏*/
  }
    .overflow_4 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    
    display: -webkit-box;
    line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 2;
    
  }
  .statis_no_list {
    background: #ffffff !important;
    .no_pic {
      width: 456px;
      height: 420px;
      margin-top: 300px;
    }
  }
  .statis_no {
    text-align: center;
    background: #f8f8f8;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  .no_pic {
    width: 456px;
    height: 420px;
    margin-top: 400px;
  }
  .no_title {
    color: #9b9b9b;
    font-size: 28px;
    text-align: center;
    margin-top: 20px;
  }
</style>